.design-content_over {
  z-index: 1;
  outline: 4px solid var(--drag-h-color);
}

.selectRect {
  z-index: 99999;
  overflow: hidden;
  outline: 1px solid slateblue;
  position: absolute;
}

.design-panel-container-height {
  height: var(--header-heigh1t);
}

//content
.design-panel-container {
  flex: 1;
  position: relative;
  height: 100%;
  transition: width 0.28s;

  .design-panel {
    //display: flex;
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: calc(100% - 20px);
    background: #eef0f5;

    .design-content_inner {
      overflow: hidden;
      height: calc(100% - 20px);

      &:focus-visible {
        outline: transparent;
      }

      .design-content-scroll {
        position: relative;
        height: 100%;
        box-sizing: border-box;
        width: 100%;
        overflow: auto;
        padding: 30px 260px 20px 30px;

        /* 定义滚动条的宽度 */
        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }

        /* 定义滚动条轨道的样式 */
        &::-webkit-scrollbar-track {
          background: transparent;
        }

        /* 定义滚动条滑块的样式 */
        &::-webkit-scrollbar-thumb {
          background: var(--drag-h-color);
          border-radius: 2px;
        }

        /* 定义滚动条滑块在鼠标悬停时的样式 */
        &::-webkit-scrollbar-thumb:hover {
          background: #555;
        }

        &::-webkit-scrollbar-corner {
          height: 4px;
          width: 4px;
        }


        /* 定义滚动条的宽度和颜色 */
        scrollbar-width: auto;
        scrollbar-color: var(--drag-h-color);

        /* 对于旧版本的Firefox，你可以使用以下样式 */
        &::-moz-scrollbar {
          width: 4px;
          height: 4px;
        }

        &::-moz-scrollbar-track {
          background: #f1f1f1;
        }

        &::-moz-scrollbar-thumb {
          background: var(--drag-h-color);
        }

        .design-content-scale {
          display: flex;
        }

        .design-content {
          left: 0;
          top: 0;
          height: 100%;
          width: var(--panel-width);
          position: relative;
          background: white;
          //box-sizing: border-box;
          box-shadow: 5px 10px 15px 5px rgba(0, 21, 41, 0.08);
        }

        .design-content-bg {
          //pointer-events: none;
          background-image: -webkit-gradient(linear, left top, right top, color-stop(3%, rgba(0, 0, 0, .1)), color-stop(3%, transparent)), -webkit-gradient(linear, left bottom, left top, color-stop(3%, rgba(0, 0, 0, .1)), color-stop(3%, transparent));
          background-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 3%, transparent 0), linear-gradient(1turn, rgba(0, 0, 0, .1) 3%, transparent 0);
          background-size: 5mm 5mm;
          background-position: 0 0;
        }
      }
    }


  }

  .advanced-config {
    overflow: hidden;
    background: white;
  }

  .handle-panel-icon {
    color: var(--drag-h-color);
    width: 18px;
    height: 18px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 5px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
  }

  .handle-panel-icon:hover {
    background: var(--bg-highlight-color);
  }

  .handle-panel-icon-active {
    color: white;
    background: var(--drag-h-color);
  }
}

.dropInIs {
  z-index: 999;
  //opacity: 0.6;
  background: white;
  outline: 4px solid var(--drag-h-color);

  &:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(230, 233, 250, 0.4) !important;
  }
}

.mouse-tips {
  position: absolute;
  left: 15px;
  z-index: 1000;
  top: 0;
  will-change: transform;
  //background: #f0f2f5;
  //background: gray;
  color: var(--drag-h-color);
  //border: 1px solid gray;
}
